<template>
  <el-row class="height-100">
    <el-col class="height-100">
      <!-- <PageTitle pageTitle="客户管理" subPageTitle=""></PageTitle> -->
      <el-row class="mx__20 px-20 bg-white">
        <el-col class="current-content-style">
          <SearchLayer @search-custome="updateTableData" @page-reset="pageReset"></SearchLayer>
          <CustomeTable :tableData="tableData"></CustomeTable>
          <current-page
            @changePage="handleCurrentChange"
            @chagne-page-size="handleSizeChange"
            :total="total"
            :current-page="nowPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
          ></current-page>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
// 客户管理
import { getCustomer } from './../config/api'
import SearchLayer from '../components/customems/SearchLayer.vue'
import CustomeTable from '../components/customems/CustomeTable.vue'
import CurrentPage from '../components/globalcomponent/CurrentPage.vue'
export default {
  data() {
    return {
      filterInfo: {
        name: '',
        phone: '',
        address: '',
        craeteTime: '',
        state: null
      },
      pageSize: 10,
      nowPage: 1,
      total: 0,
      tableData: []
    }
  },
  created() {
    this.getCustomerPage()
  },
  methods: {
    // 重置页面
    pageReset() {
      this.filterInfo = {
        name: '',
        phone: '',
        address: '',
        craeteTime: '',
        state: null
      }
      this.getCustomerPage()
    },
    // 查询结果更新表格
    updateTableData({ data, info }) {
      // console.log(data, info)  // 子组件返回的查询结果，分页参数，查询条件的数据
      this.tableData = data.list
      this.pageSize = data.pageSize
      this.pageNum = data.pageNum
      this.total = data.total
      this.filterInfo = info // 分页时，再按这个查询数据来继续查询
    },
    getCustomerPage() {
      getCustomer({ ...this.filterInfo, pageNum: this.nowPage, pageSize: this.pageSize })
        .then(res => {
          console.log(res)
          this.tableData = res.data.list
          this.total = res.data.total
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
        .catch(err => {
          this.$message({
            message: err.msg,
            type: 'error'
          })
        })
    },
    handleCurrentChange(page) {
      console.log(page)
      this.nowPage = page
      this.getCustomerPage()
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.getCustomerPage()
    }
  },
  components: {
    // PageTitle,
    SearchLayer,
    CustomeTable,
    CurrentPage
  }
}
</script>

<style></style>
